<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>svg</title>
    <style>
      .svg {
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <svg class="svg" width="1200" height="400">
      <!-- 画线段 -->
      <line x1="100" y1="100" x2="200" y2="200" stroke="#000" />
      <line x1="200" y1="200" x2="300" y2="100" stroke="#000" />
      <line x1="300" y1="100" x2="100" y2="100" stroke="#000" />
      <!-- 画折线 -->
      <!-- 首尾不相连 -->
      <polyline
        points="
          100 250
          200 250
          200 300
          300 300
        "
        fill-opacity="0"
        stroke="#000"
      />
      <!-- 画多边形 -->
      <!-- 首尾相连 -->
      <!-- <polygon
        points="
          100 250
          200 250
          200 300
          300 300
        "
        fill-opacity="0"
        stroke="#000"
      /> -->
      <!-- 画矩形 -->
      <rect x="400" y="100" width="200" height="100" fill="pink" />

      <rect
        x="400"
        y="250"
        width="200"
        height="100"
        fill-opacity="0"
        stroke="#000"
      />
      <!-- 画圆 -->
      <circle cx="700" cy="150" r="50" />

      <circle cx="700" cy="300" r="50" fill-opacity="0" stroke="#000" />
      <!-- 画椭圆 -->
      <ellipse
        cx="850"
        cy="200"
        rx="100"
        ry="50"
        fill-opacity="0"
        stroke="#000"
      />

      <path
        d="
          M 1020 150
          L 1180 150
          L 1050 250
          L 1100 100
          L 1150 250
          Z
        "
        fill-opacity="0"
        stroke="#000"
      />
    </svg>

    <svg viewBox="0 0 1024 1024" width="16" height="16">
      <path
        d="M512 836.266667C230.4 836.266667 74.666667 533.333333 68.266667 520.533333c-4.266667-8.533333-4.266667-19.2 0-29.866666 6.4-12.8 164.266667-315.733333 443.733333-315.733334 281.6 0 437.333333 305.066667 443.733333 317.866667 4.266667 8.533333 4.266667 19.2 0 29.866667-6.4 10.666667-162.133333 313.6-443.733333 313.6zM132.266667 505.6c34.133333 57.6 170.666667 266.666667 379.733333 266.666667s345.6-209.066667 379.733333-266.666667c-34.133333-57.6-170.666667-266.666667-379.733333-266.666667S166.4 448 132.266667 505.6z"
        fill="#000000"
      ></path>
      <path
        d="M512 650.666667c-76.8 0-138.666667-61.866667-138.666667-138.666667s61.866667-138.666667 138.666667-138.666667 138.666667 61.866667 138.666667 138.666667-61.866667 138.666667-138.666667 138.666667z m0-213.333334c-40.533333 0-74.666667 34.133333-74.666667 74.666667s34.133333 74.666667 74.666667 74.666667 74.666667-34.133333 74.666667-74.666667-34.133333-74.666667-74.666667-74.666667z"
        fill="#000000"
      ></path>
    </svg>

    <svg
      t="1669344550090"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="3634"
      width="16"
      height="16"
    >
      <path
        d="M955.733333 492.8c-6.4-12.8-162.133333-317.866667-443.733333-317.866667-23.466667 0-46.933333 2.133333-70.4 6.4-17.066667 4.266667-29.866667 19.2-25.6 36.266667 4.266667 17.066667 19.2 29.866667 36.266667 25.6 19.2-4.266667 38.4-4.266667 57.6-4.266667 209.066667 0 345.6 209.066667 379.733333 266.666667-10.666667 19.2-32 53.333333-64 91.733333-10.666667 12.8-8.533333 34.133333 4.266667 44.8 6.4 4.266667 12.8 6.4 21.333333 6.4s19.2-4.266667 25.6-10.666666c51.2-61.866667 78.933333-115.2 78.933333-117.333334 6.4-8.533333 6.4-19.2 0-27.733333zM215.466667 125.866667c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l91.733333 91.733333C138.666667 354.133333 72.533333 484.266667 68.266667 490.666667c-4.266667 8.533333-4.266667 19.2 0 29.866666 6.4 12.8 162.133333 315.733333 443.733333 315.733334 83.2 0 164.266667-27.733333 241.066667-81.066667l96 96c6.4 6.4 14.933333 8.533333 23.466666 8.533333s17.066667-2.133333 23.466667-8.533333c12.8-12.8 12.8-32 0-44.8L215.466667 125.866667z m243.2 334.933333l104.533333 104.533333c-12.8 12.8-32 21.333333-51.2 21.333334-40.533333 0-74.666667-34.133333-74.666667-74.666667 0-19.2 8.533333-38.4 21.333334-51.2zM512 772.266667c-209.066667 0-345.6-209.066667-379.733333-266.666667 21.333333-36.266667 81.066667-130.133333 174.933333-196.266667l104.533333 104.533334c-25.6 25.6-38.4 59.733333-38.4 96 0 76.8 61.866667 138.666667 138.666667 138.666666 36.266667 0 70.4-14.933333 96-38.4l98.133333 98.133334c-61.866667 42.666667-128 64-194.133333 64z"
        p-id="3635"
      ></path>
    </svg>
  </body>
</html>
